<template>
  <section>
          <header>
        <div class="header_top">
            <span @click="goBack()"></span>
            <p>购物车</p>
        </div>
        <div class="header_search">
            <input type="" placeholder="请输入订单名称">
        </div>
    </header>
    <main>
        <div class="main_1">
            <div class="main_1_place">
            <p>请开始你的才艺表演`</p>
            </div>
            <div class="main_1_shan">
                <p><i></i>闪送票务</p>
                <p>￥0起送，22:00前满￥30减免票费，22:00后满￥69减免票费</p>
            </div>
            <div class="main_1_time">
                <p>订购时间<span>1秒可以订达</span></p>
                <p>可预订></p>
            </div>
                <div class="main_1_bz">
                <p>订购备注</p>
                <input type="text" placeholder="可输入100字">
            </div>
        </div>
        <div class="main_2" v-for="item in getData">
                <div class="l-tickets_con">
                    <div class="l-tickets_con_box">
                        <p class="sheng">[门票]{{item.title}}</p>
                        <div class="left">
                            <img :src="item.imgurl">
                        <p>16:00前可订今日票</p>
                        <div class="youhui">

                        </div>
                        <div class="know">
                            订票须知
                        </div>
                        </div>
                        <div class="right">
                            <div class="right_p">
                                <p>￥{{item.oldPrice}}</p>
                                <h3>￥<span>{{item.newPrice}}</span></h3>
                                <h4>最高返￥8</h4>
                            </div>
                        </div>
                        <div class="main_2_dna">
                            <p class="del" @click="del(item)" v-if="item.num>0"></p>
                            <p class="num">{{item.num}}</p>
                            <p class="add" @click="add(item)"></p>
                        </div>
                        <label>
                            <input type="checkbox">
                            <div class="main_2_select">  
                            </div>
                        </label>
                        <div class="delete" @click="remove(item.id)"></div>
                    </div>
                    
                </div>
        </div>
        <div class="main_2_sure" v-show="hide">
            <p>我秃了————也变强了</p>
            <div>
            <div class="main_2_yes" @click="sure">Yeah!</div>
            <div class="main_2_no" @click="none">Oh!No</div>
            </div>
        </div>
        <div class="main_3_sure">
            <label>
                <input type="checkbox">
                <div class="main_3_select">
                </div>
            </label>  
            <div>
                <p class="sum">共：￥<span>{{total}}</span></p>
            </div>
            <div class="sure">
                <p>购买</p>
            </div>
        </div>
    </main>
  </section>
</template>
<script>
export default {
    data(){
        return{
            sum:0,
            hide:false,
            list:[],
            id: 0
        }
    },
    methods:{
        goBack(){
             window.history.back();
        },
        add(item){
            item.num++;
            this.sum+=item.newPrice;
        },
        del(item){
            item.num--;
            this.sum-=item.newPrice;
        },
        remove(i){
            this.hide=!this.hide;
            this.id = i;
        },
        sure(){
            this.$store.commit("remove",this.id);
            this.hide=!this.hide;
        },
        none(){
            this.hide=!this.hide;
        }
    },
    computed:{
        getData(){
            this.list=this.$store.state.article;
            return this.$store.state.article;
        },
        total(){
            this.sum = 0;
            for(let k in this.list){
                this.sum+=this.list[k].newPrice*this.list[k].num;
            }
            return this.sum;
        }
    },
    mounted(){

    }
}
</script>

<style scoped>
.main_2_sure{
    width: 6rem;
    height: 3rem;
    background:rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3rem;
    z-index: 99;
    border-radius: .5rem;
    color: white;
    text-align: center;
    font-size: .4rem;
}
.main_2_sure>p{
    margin: 8% 0 15% 0;
}
.main_2_sure>div{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.main_2_yes{
    width:2rem;
    height: .8rem;
    line-height: .8rem;
    background:#d5d5d5;
    opacity: .5;
    color: black;
    font-size: .3rem
}
.main_2_no{
    width:2rem;
    height: .8rem;
    line-height: .8rem;
    background:#d5d5d5;
    opacity: .5;
    color: black;
    font-size: .3rem
}
main label>input{
    display: none;
}
main label>input:checked+div{
    background: rgba(122, 55, 139, .8);
}
body{
    font-size: 0.3467rem;
}
      /*  头部的样式*/
header{
    position: fixed;
    width: 100%;
    z-index: 99;
}
.header_top{
    text-align: center;
    height: 1.3333rem;
    line-height: 1.3333rem;
    width: 100%;
    border-bottom: 0.0133rem solid #d5d5d5;
    border-top: 0.0133rem solid #d5d5d5;
    font-size: 0.5333rem;
    background: #f8f8f8;
}
.header_top span::after{
    content: "";
    width: 0.4333rem;
    height: 0.4333rem;
    border-top: 0.0233rem solid #d30775;
    border-right: 0.0233rem solid #d30775;
    transform: rotate(225deg);
    position: absolute;
    top: 0.4rem;
    left: .5rem;
}
.header_search input{
    width: 9.1867rem;
    height: 0.96rem;
    border: none;
    border: 0.0133rem solid #d5d5d5;
    border-radius: .1rem;
    text-indent: 0.6667rem;
    font-size: 0.3467rem;
}
.header_search{
    height: 1.4667rem;
    line-height: 1.4667rem;
    width: 100%;
    text-align: center;
    background: #f8f8f8;
}
        /*  主体的结构样式*/
main{
    position: absolute;
    top: 2.77797rem;
    width:100%;
}
        /*  主体第一部分的结构样式*/
.main_1_place{
    background: #f8f8f8;
    height: 1.5rem;
    font-size: .437rem;
    line-height: 1.406rem;
    text-indent: .468rem;
    margin-top: .2rem;
}
.main_1_shan{
    margin-top: .312rem; 
    background: #ffffff;
    height: 1.718rem;
    font-size: .31rem;
    text-indent: .468rem;
    border-bottom:.031rem solid #e0e0e0;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    color:#a3a3a3;
}
.main_1_shan i{
    display: inline-block;
    width: .156rem;
    height: .35rem;
    border-radius: 30%;
    background:#ffd600;
    margin-right:  .1rem;
    vertical-align: middle; 
}
.main_1_time{
    background: #ffffff;
    height: 1.718rem;
    font-size: .406rem;
    text-indent: .468rem;
    border-bottom:.031rem solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main_1_time span{
    color:#d30775;
    margin-left: .437rem;
}
.main_1_time p:last-child{
    margin-right: .4rem;
}
.main_1_bz{
    background: #ffffff;
    height: 1.718rem;
    font-size: .406rem;
    text-indent: .468rem;
    border-bottom:.031rem solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main_1_bz input{
    width: 6.875rem;
    margin-right: .5rem;
    height: 0.96rem;
    border: none;
    border: 0.0133rem solid #d5d5d5;
    border-radius: .1rem;
    text-indent: 0.6667rem;
    font-size: 0.3467rem;
}
        /*主体第二部分的结构样式*/
.l-tickets_con{
	height: 4.305556rem;
	width: 100%;
	background:#f2f2f2;
    border-bottom: 2px solid #e7e7e7;
    position: relative;
}
.l-tickets_con_box img{
    display: block;
    width: 3rem;
    position: absolute;
    margin-top: .2rem;
}
.l-tickets_con .l-tickets_con_box{
	height: 2.583333rem;
	width: 94%;
	margin:0 auto;
	position: relative;
}
.l-tickets_con .l-tickets_con_box p{
	padding: 0.361111rem 0 0 0;	
}

.l-tickets_con .l-tickets_con_box .left p{
	float: left;
	margin: -0.099444rem 0 0 40%;
	font-size: 0.277778rem;
	color: #91b7cc;
	background:url(../../../static/imgs/2258eb98-1f68-4f96-a794-d7a0fdc0025c_480_320.jpg) left bottom no-repeat;
	background-size:0.361111rem 0.361111rem; 
}
.l-tickets_con .l-tickets_con_box .left .youhui{
	clear: both;
    padding: 2% 0;
    margin-left: 40%;
}
.sheng{
    display:block;
    white-space:nowrap;
    overflow:hidden; 
    text-overflow:ellipsis;
    width: 80%;
}
.l-tickets_con .l-tickets_con_box .left .youhui li{
	float: left;
	color: #d5a864;
	height: 0.391111rem;
	width: 16%;
	text-align: center;
	line-height: 0.391111rem;
	border: 2px solid #eba26f;
	margin: 0 1%;
}
.l-tickets_con .l-tickets_con_box .left .know{
	clear: both;
	padding: 5% 0 0 0;
}
.l-tickets_con .l-tickets_con_box .right{
	height: 1.388889rem;
	width: 30%;
	position:absolute;
	bottom: -0.528889rem;
	right: 0;
}
.right_p{
	font-size: 0.277778rem;
	height: 1.25rem;
	width: 50%;
	float: left;
}
.right_p p{
	margin: -0.277778rem 0 0 0;
	font-size: 0.277778rem;
	text-decoration: line-through;
}
.right_p h3{
	color: #cf0771;
     font-size:.31111rem; 
     padding: 0 1rem 0 0;
}
.right_p h4{
	clear: both;
	font-size:0.297778rem;
	color: #cf0771;
	font-weight: normal;
}
.add{
    width: 0.875rem;
    height: 0.875rem;
    background:purple url(../../../static/imgs/product_operate-57bf1d7b.png)no-repeat center;
    background-position: -1.08rem -.08rem;
    background-size: 2rem;
    border-radius: 50%;
    border: 0.0267rem solid purple ;
    margin-left: .5rem;
}
.del{
    width: 0.875rem;
    height: 0.875rem;
    background:purple url(../../../static/imgs/product_operate-57bf1d7b.png)no-repeat center;
    background-position: -0.1rem -0.1rem;
    background-size: 2rem;
    border-radius: 50%;
    border: 0.0267rem solid purple ;
    margin-right: .5rem;
}
.main_2{
    position: relative;
}
.delete{
    width: 1rem;
    height: 1rem;
    background:url(../../../static/imgs/timg.jpg)no-repeat;
     background-position: 20px 20px; 
    background-size: 2rem;
    position: absolute;
    right: 0;
    top: 0;
}
.main_2_dna{
    display: flex;
    justify-content: center;
    vertical-align: middle;
    padding-top: .3rem;
}
.main_2_select{
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    border: .031rem solid purple;
    position: absolute;
    left: 0;
    top: 3.3rem;
}
        /*主体第三部分的结构样式*/
.main_3_sure{
    background: #ffffff;
    height: 1.7rem;
    font-size: .406rem;
    border-bottom:.031rem solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sum{
    margin-right: 1rem;
}
.sum span{
    color:purple;
}
.sure{
    background: purple;
    width: 3.125rem;
    height: 100%;
    line-height: 1rem;
    text-align: center;
    font-weight: bold;
    font-size: 0.437rem;
    color: white;
    height: 1rem;
    border-radius: 1rem;
    margin-right: .5rem;
}
.main_3_select{
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    border: .031rem solid purple;
    margin-left: .3rem;
}
.num{
    margin-top: -.1rem;
    color: purple;
}
</style>
